<!--主题列表-->
<script setup>

import {routeNameIn} from "@/assets/js/routerUtils";
import {setupMapState} from "@/assets/js/vuexUtils";
import ReplyStatusTag from "@/components/common/infotag/ReplyStatusTag.vue";
import JumpPage from "@/components/common/JumpPage.vue";
import ForumLink from "@/components/common/link/ForumLink.vue";
import ReadLink from "@/components/common/link/ReadLink.vue";
import UserLink from "@/components/common/link/UserLink.vue";
import Timestamp from "@/components/common/Timestamp.vue";
import {routeNames} from "@/router";
import {ArrowDown} from "@element-plus/icons-vue"
import {toRefs} from "vue";
import ContentRender from "@/components/content/ContentRender.vue";
import {ForumType} from "@ginstone/nga-api/dist/src/enums/ForumType";
import {EntranceType} from "@ginstone/nga-api/dist/src/enums/EntranceType";
import {OrderByParam} from "@ginstone/nga-api/dist/src/enums/OrderByParam";
import {useStore} from "vuex";

const props = defineProps({
  data: Array,
  forum: Object,
  selection: Boolean
})
const {currentUid,} = setupMapState("Account", ["currentUid"])

const {data, selection, forum} = toRefs(props)
const store = useStore();

// 可以排序的路由名称
const sortable = [routeNames.thread.forumList, routeNames.thread.colList]

//适配镜像贴
const getTopicId = (row) => {
  return row.quoteFromTopicId || row.topicId
}

const getTitleClass = (titleFont) => {
  if (!titleFont) {
    return "tf-default";
  }
  const res = []
  const {color, bold, lineThrough, italic} = titleFont
  if (bold) {
    res.push("tf-bold")
  }
  if (lineThrough) {
    res.push("tf-lineThrough")
  }
  if (italic) {
    res.push("tf-italic")
  }
  switch (color.name) {
    case "红色":
      res.push("tf-red");
      break;
    case "蓝色":
      res.push("tf-blue");
      break;
    case "绿色":
      res.push("tf-green");
      break;
    case "棕/橙色":
      res.push("tf-orange");
      break;
    case "银/灰色":
      res.push("tf-silver");
      break;
    case "默认":
      res.push("tf-default");
      break;
  }
  return res.join(" ")
}

const getTargetId = (row) => {
  if (row.parent) {
    row.parent.forumId || row.parent.colTid
  }
  if (forum.value) {
    return forum.value.forumId
  }
}


</script>

<template>
  <el-table :cell-class-name="({rowIndex})=>store.getters['Config/getRowClass'](rowIndex)"
            :data="data"
  >
    <el-table-column v-if="selection" type="selection" width="55"/>
    <el-table-column v-else label="#" width="40px">
      <template #default="s">
        {{ s.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="回复数" prop="replies" width="80px"/>
    <el-table-column label="主题">
      <template #default="{row}">
        <!--        第一行 标题部分-->
        <div class="topic-title-block">
          <div class="block"><!--              版面入口-->
            <forum-link v-if="row.entranceType!==EntranceType.TOPIC"
                        :col-tid="row.topicId"
                        :forum-id="row.forumId"
            >
              <span :class="getTitleClass(row.titleFont)">{{ row.title }}</span>
            </forum-link>
            <!--                主题标题-->
            <read-link
                v-else
                :target-id="getTargetId(row)"
                :tid="getTopicId(row)"
                :title="row.title"
                :type="row.parent?(row.parent.forumId?ForumType.FORUM:ForumType.COLLECTION):ForumType.FORUM"
            >
              <span :class="getTitleClass(row.titleFont)">{{ row.title }}</span>
            </read-link>
            <!--              主题状态-->
            <reply-status-tag v-if="row.status" :data="row.status"/>
            <!--            镜像标记-->
            <el-tooltip v-if="row.quoteFromTopicId" content="这个主题来自其他版面">
              <el-tag effect="dark" type="info">镜像</el-tag>
            </el-tooltip>
            <!--分页跳转-->
            <span v-if="row.totalPage>1">
              <span v-if="row.totalPage>5">[
                <read-link :page="1" :tid="getTopicId(row)"><span>{{ 1 }}&nbsp;</span></read-link>
                <read-link :page="2" :tid="getTopicId(row)"><span>{{ 2 }}&nbsp;</span></read-link>
                <jump-page :id="row.topicId" :name="routeNames.read.topic" :total-page="row.totalPage"><span style="font-weight: bold">. . .</span></jump-page>
                <read-link :page="row.totalPage" :tid="getTopicId(row)"><span>{{ row.totalPage }}&nbsp;</span></read-link>
                ]</span>
              <span v-else class="tf-default">[
                <read-link v-for="i in row.totalPage" :page="i" :tid="getTopicId(row)">
                  <span>{{ i }}</span>
                  <span v-if="i!==row.totalPage">&nbsp;</span>
                </read-link>
                ]</span>
            </span>
          </div>
          <div v-if="row.parent" class="block">
            <forum-link :bracket="true" :col-tid="row.parent.colTid" :forum-id="row.parent.forumId">{{ row.parent.name }}</forum-link>
          </div>
        </div>
        <!--第二行，回复部分-->
        <div v-if="row.reply">
          <h4>
            <read-link :pid="row.reply.replyId" bracket style="margin-right: 5px">主题内回复</read-link>
            <timestamp :date="row.reply.postDatetime"/>
          </h4>
          <content-render :data="row.reply.contentNodes"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="发布" width="160px">
      <template #header>
        发布 &nbsp;&nbsp;&nbsp;
        <el-icon v-if="routeNameIn($route,...sortable)" class="ArrowDown"
                 @click="$router.push({query:{...$route.query,order_by:OrderByParam.created}});">
          <ArrowDown/>
        </el-icon>
      </template>
      <template #default="{row}">
        <user-link :user-id="row.authorUid" :username="row.authorName">
          {{ row.authorName }}
        </user-link>
        <br>
        <timestamp :date="row.postDatetime"/>
      </template>
    </el-table-column>
    <el-table-column width="160px">
      <template #header>
        最后 &nbsp;&nbsp;&nbsp;
        <el-icon v-if="routeNameIn($route,...sortable)" class="ArrowDown"
                 @click="$router.push({query:{...$route.query,order_by:undefined}})">
          <ArrowDown/>
        </el-icon>
      </template>
      <template #default="{row}">
        <user-link :username="row.lastPosterName">
          {{ row.lastPosterName }}
        </user-link>
        <br>
        <timestamp :date="row.lastPost"/>
      </template>
    </el-table-column>


  </el-table>
</template>

<!--suppress CssUnusedSymbol -->
<style scoped>
.ArrowDown {
  cursor: pointer;
}

.tf-red {
  color: #D00;
}

.tf-blue {
  color: #06B;
}

.tf-green {
  color: #3D9F0E;
}

.tf-orange {
  color: #A06700;
}

.tf-silver {
  color: #C0C0C0;
}

.tf-default {
  color: #1A3959;
}

.tf-bold {
  font-weight: bold;
}

.tf-italic {
  font-style: italic;
}

.tf-lineThrough {
  text-decoration: line-through;
}

.topic-title-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

</style>